<template>
    <div class="container">
        <!-- 鼠标移动条 -->
        <div class="header"></div>
        <!-- 背景图 -->
        <video v-if="isVideo" class="video-bg" :src="bgImages[0]" webkit-playsinline="true" playsinline="true"
            x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
            x5-video-ignore-metadata="true" width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted">
            <p>不支持video</p>
        </video>
        <ul class="login-bg" v-if="!isVideo">
            <template v-if="bgImages.length > 0">
                <li v-for="(item, index) in bgImages" :key="index" :class="[bgIndex == index ? 'fadeInout' : '']">
                    <img :src="item" />
                </li>
            </template>
            <li class="fadeInout" v-else>
                <img src="../../assets/img/login/login_bg_img.jpg" alt="" />
            </li>
        </ul>
        <!-- 关闭和最小化 -->
        <div class="close-wrap">
            <img src="../../assets/img/login/min_icon.png" @click="miniWindow" alt="" />
            <img src="../../assets/img/login/close_icon.png" @click="closeWindow" alt="" />
        </div>
        <!-- 登录区域 -->
        <div class="content">
            <div class="qrcode">
                <img v-if="type == 0" @click="type = 1" src="../../assets/img/login/qrcode_icon.png" alt="" />
                <img v-if="type == 1" @click="type = 0" src="../../assets/img/login/client_icon.png" alt="" />
            </div>
            <!-- logo -->
            <div class="login-title">
                <img @click="openResetDB" src="../../assets/img/login/logo_icon.png" alt="" />
            </div>
            <!-- 登录 -->
            <div class="login-wrap" v-if="type == 0">
                <div class="group-wrap">
                    <img class="icon" src="../../assets/img/login/user_name_icon.png" alt="" />
                    <input class="login-input" type="text" @keyup.enter="login" maxlength="11" v-model="form.username"
                        placeholder="请输入手机号" />
                </div>
                <div class="group-wrap">
                    <img class="icon" src="../../assets/img/login/password_icon.png" alt="" />
                    <input class="login-input" type="password" @keyup.enter="login" v-model="form.password"
                        placeholder="请输入密码" />
                </div>
                <div class="password-box">
                    <div class="text-left">
                        <el-checkbox  :checked="isChecked" style="font-size:14px;color: #fff;" v-model="rememberPassword">
                            记住密码
                        </el-checkbox>
                </div>
                <div class="text-right">
                    <a href="javascript:;" @click="type = 3">忘记密码？</a>
                </div>
                </div>
                <el-button type="primary" :disabled="form.username && form.password ? false : true" :loading="loading"
                    @click="login" round>登录</el-button>
                <div class="text-center">
                    <a href="javascript:;" @click="type = 2">没有账号？点击注册</a>
                </div>
            </div>
            <!-- 二维码登录 -->
            <div class="qrcode-wrap" v-if="type == 1">
                <div class="qrcode-box">
                    <img :src="qrImag" alt="" />
                </div>
                <div class="qrcode-tips">请使用微信扫一扫</div>
            </div>
            <!-- 注册或忘记密码 -->
            <div class="register-wrap" v-if="type == 2 || type == 3">
                <div class="group-wrap sms">
                    <img class="icon" src="../../assets/img/login/phone_icon.png" alt="" />
                    <input class="login-input" type="text" @keyup.enter="registerFn" v-model="register.mobile"
                        placeholder="请输入手机号" />
                    <span class="sms-btn" :class="[smsText == '获取验证码' ? '' : 'sms-send']"
                        @click="countDown">{{ smsText }}</span>
                </div>
                <div class="group-wrap">
                    <img class="icon" src="../../assets/img/login/sms_icon.png" alt="" />
                    <input class="login-input" type="text" @keyup.enter="registerFn" v-model="register.registerCode"
                        placeholder="请输验证码" />
                </div>
                <div class="group-wrap">
                    <img class="icon" src="../../assets/img/login/password_icon.png" alt="" />
                    <input class="login-input" type="password" @keyup.enter="registerFn" v-model="register.password"
                        :placeholder="type == 2 ? '请输入密码' : '请输入新密码'" />
                </div>
                <el-button type="primary" :disabled="
            register.mobile && register.registerCode && register.password
              ? false
              : true
          " :loading="loading" @click="registerFn" round>{{ type == 2 ? "注册" : "找回密码" }}</el-button>
                <div class="text-center">
                    <a href="javascript:;" @click="type = 0">已有账号？点击登录</a>
                </div>
            </div>
        </div>
        <div v-if="resettools" class="tools">
            <img @click="resettools = false" style="position:absolute;right:10px;top:10px;cursor:pointer;" src="../../assets/img/home/close.png" alt="">
            <button class="resetKu" @click="resetKu">初始化数据库</button>
        </div>
    </div>
</template>
<script>
import qrCode from "qrcode";
import user from "@/content/api/user";
import { StringUtil } from "../../../../../static/utils/StringUtil";
import { User } from "../../../../../static/lib/sqlite/model/User";
import { SqlLib } from "../../../../../static/lib/sqlite/SqlLib";
import moment from "moment";
import { Ini } from "../../utils/ini";
const cryUtil = require("../../../../../static/utils/CrypUtil");

export default {
    data () {
        return {
            form: {
                username: localStorage.username || "",
                password: null,
            },
            register: {
                mobile: null,
                registerCode: null,
                password: null,
            },
            isVideo: false,
            bgImages: [],
            qrImag: null,
            qrUuid: null,
            timer: null,
            bgIndex: 0,
            type: 0, //0.登录 1.二维码登录 2.注册 3.忘记密码
            loading: false,
            smsText: "获取验证码",
            rememberPassword: false,
            isRemember:false,
            isChecked:localStorage.getItem('password') ? true : false,
            resettools:false,
            clickTimes:0
        };
    },
    watch: {
        type (type) {
            console.log(type);
            if (type === 1) {
                this.getQrcode((_) => {
                    this.checkQrState();
                });
            } else {
                this.initForm();
                if (window.queryUser) {
                    clearInterval(window.queryUser);
                }
            }
        },
        rememberPassword(val,oval){
            this.rememberPassword = val
            console.log(this.rememberPassword );
        },
        // form:{
        //     handler(obj){
        //         console.log(obj.username);
        //         if (obj.username == 'resetDB') {
        //             this.resettools = true
        //         }else{
        //             this.resettools = false
        //         }
        //     },
        //     deep:true
        // }
    },
    mounted () {
        this.isRemember = localStorage.getItem('rememberPassword')

        console.log(this.isRemember);
        this.$nextTick(function(){
            this.form.password = localStorage.getItem('password')
        })
        //禁止选择网页中的文字
        window.document.onselectstart = () => false;
        this.getAppBackImg((_) => {
            this.animFn();
        });
        window.document.onselectstart = () => false
        window.document.ondragstart = () => false
        window.document.oncontextmenu = () => false
    },
    methods: {
        openResetDB(){
            console.log(this.clickTimes);
            this.clickTimes++
            if (this.clickTimes == 6 ) {
                this.resettools = true
                this.clickTimes = 0
            }
        },
        copyKu(from,to,msg){
            const fs = require('fs')
            fs.writeFileSync(to, fs.readFileSync(from));
            if (msg == 'showMsg') {
                this.$message.success('初始化成功')
            }
        },
        resetKu(){
            const fs = require('fs')
            const path = require('path');

            const cur_PATH = path.resolve(window.$DATADIR + 'novoedu.smd');
            const log_PATH = path.resolve(window.$DATADIR + 'novoedu_log.smd');
            this.copyKu(cur_PATH,log_PATH)
            setTimeout(() => {
                const old_PATH = path.resolve(window.$DATADIR + 'novoedu_Init.smd');
                const new_PATH = path.resolve(window.$DATADIR + 'novoedu.smd');
                console.log(old_PATH,new_PATH);
                this.copyKu(old_PATH,new_PATH,'showMsg')
            }, 2000);
        },
        /**
         * 初始化表单内容
         */
        initForm () {
            this.form = {
                username:  localStorage.getItem('username'),
                password: localStorage.getItem('password'),
            };
            this.register = {
                mobile: null,
                registerCode: null,
                password: null,
            };
        },
        /**
         * 获取登录页面背景图
         */
        getAppBackImg (cb) {
            user.getAppBackImg({ appVersion: 0 }).then((res) => {
                if (res.code == "0") {
                    if (res.returnValue.modelType == "3") {
                        this.isVideo = true;
                    }
                    if (res.returnValue.filesUrl.length > 0) {
                        this.bgImages = res.returnValue.filesUrl;
                    }
                }
                cb();
            });
        },
        /**
         * 获取二维码
         */
        getQrcode (cb) {
            let version = this.$readIniFile("data", "versionInfo");
            let env = this.$readIniFile("data", "env");
            let envDomain =
                env === this.$CONST.global.developmentStr
                    ? this.$CONST.global.developmentWxDomain
                    : this.$CONST.global.productionWxDomain;
            user.getQrUuid({ clientVersion: version }).then((res) => {
                console.log(res);
                this.qrUuid = res.returnValue.qrUuid;
                let chatUrl = StringUtil.format(
                    "https://{0}/scanLogin/wxAuth.html?qr_uuid={1}",
                    envDomain,
                    this.qrUuid
                );
                console.log(chatUrl);
                this.createQr(chatUrl);
                cb();
            });
        },
        /**
         * 最小化窗口
         */
        miniWindow () {
            this.$client.minimise();
        },
        /**
         * 关闭窗口
         */
        closeWindow () {
            this.$client.closeAllWindow();
        },
        /**
         * 背景动画
         */
        animFn () {
            let i = 0;
            if (this.bgImages.length > 1) {
                this.timer = setInterval((_) => {
                    i = i == this.bgImages.length ? 0 : i;
                    this.bgIndex = i;
                    i++;
                }, 5000);
            }
        },
        /**
         * 创建二维码
         */
        createQr (resUrl) {
            let opts = {
                errorCorrectionLevel: "L",
                type: "image/jpeg",
                margin: 0,
                scale: 10,
            };
            let _this = this;
            qrCode.toDataURL(resUrl, opts, function (err, url) {
                if (err) {
                    _this.qrImag = "";
                } else {
                    _this.qrImag = url;
                }
            });
        },
        /**
         * 检查登录二维码状态
         */
        checkQrState () {
            let _this = this;
            window.queryUser = setInterval(function () {
                const params = {
                    qrUuid: _this.qrUuid,
                };
                user
                    .getQrUserInfo(params)
                    .then((res) => {
                        if (res.code == 0) {
                            if (window.queryUser) {
                                clearTimeout(window.queryUser);
                            }
                            if (
                                res.returnValue.isOverLimit &&
                                res.returnValue.isOverLimit == 1
                            ) {
                                localStorage.setItem(
                                    "accesstoken",
                                    res.returnValue.accessToken
                                );
                                localStorage.setItem(
                                    "refreshToken",
                                    res.returnValue.refreshToken
                                );
                                _this.getUserInfo();
                                // _this
                                //     .$dialog({
                                //         title: "提示",
                                //         confirm: "确定",
                                //         type: "success",
                                //         message: "您的账号正在重复登录，其他登录地点即将下线",
                                //     })
                                //     .then((value) => {
                                //         if (value) {
                                //             //确定按钮
                                //             localStorage.setItem(
                                //                 "accesstoken",
                                //                 res.returnValue.accessToken
                                //             );
                                //             localStorage.setItem(
                                //                 "refreshToken",
                                //                 res.returnValue.refreshToken
                                //             );
                                //             _this.getUserInfo();
                                //         }
                                //     })
                                //     .catch((err) => {
                                //         console.log(err);
                                //     });
                            } else {
                                localStorage.setItem(
                                    "accesstoken",
                                    res.returnValue.accessToken
                                );
                                localStorage.setItem(
                                    "refreshToken",
                                    res.returnValue.refreshToken
                                );
                                _this.getUserInfo();
                            }
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }, 1000);
        },
        /**
         * 获取用户信息
         */
        getUserInfo () {
            let _this = this;
            let offlineUseTime = this.$readIniFile("data", "ofuTime");
            user
                .getUserInfo()
                .then((response) => {
                    if (response.code == "0") {
                        let resUser = response.returnValue;
                        let user = new User();
                        user.id = resUser.userBaseVO.userId;
                        user.name = resUser.userBaseVO.fullName
                            ? resUser.userBaseVO.fullName
                            : "";
                        user.mobile = resUser.userBaseVO.mobile
                            ? resUser.userBaseVO.mobile
                            : "";
                        user.avatar = resUser.userBaseVO.avatar
                            ? resUser.userBaseVO.avatar
                            : "";
                        user.limitCount = resUser.userBaseVO.limitCount
                            ? resUser.userBaseVO.limitCount
                            : 1;
                        user.schoolName = resUser.schoolName ? resUser.schoolName : "";
                        user.schoolId = resUser.schoolId ? resUser.schoolId : "";
                        user.isGlobal = resUser.isGlobal ? resUser.isGlobal : "";
                        user.eduLevelId = resUser.eduLevelId ? resUser.eduLevelId : "";
                        user.vipType = cryUtil.aesEncrypt(
                            resUser.isVip + "",
                            user.id + "",
                            true
                        );
                        user.remainderDays = cryUtil.aesEncrypt(
                            resUser.days + "",
                            user.id + "",
                            true
                        );
                        user.activeTime = moment().format("YYYY-MM-DD HH:mm:ss");
                        user.bookId = resUser.bookId ? resUser.bookId : "";
                        user.offlineExpired = offlineUseTime
                            ? offlineUseTime
                            : _this.$CONST.global.offlineDefaultDays;
                        user.offlineExpired = cryUtil.aesEncrypt(
                            user.offlineExpired + "",
                            user.id + "",
                            true
                        );
                        //更新用户信息
                        let sqlInstance = SqlLib.getInstance(window.$DBDIR);
                        sqlInstance.addIsGlobal()
                        let result = sqlInstance.updateOrInsertObjectById(user);
                        console.log(result);
                        if (sqlInstance.checkSqlError(result)) {
                            //需要重新检测网络
                            window.netStatus = false;
                            _this.$router.push({ name: "home" });
                        } else {
                            _this.$message.error("登录异常！");
                        }
                    } else {
                        _this.$message(response.message);
                    }
                })
                .catch((error) => {
                    _this.$message.error("登录失败！");
                });
        },
        /**
         * 登录
         */
        login () {
            if (!this.loading && this.checkLogin()) {
                this.loading = true;
                let version = this.$readIniFile("data", "versionInfo");
                const params = {
                    type: 0,
                    loginAccount: this.form.username,
                    password: this.form.password,
                    currentVersion: version,
                };
                user
                    .login(params)
                    .then((response) => {
                        this.loading = false;
                        if (response.code === "0") {
                            if (
                                response.returnValue.isOverLimit &&
                                response.returnValue.isOverLimit == 1
                            ) {
                                localStorage.setItem(
                                    "accesstoken",
                                    response.returnValue.accessToken
                                );
                                localStorage.setItem(
                                    "refreshToken",
                                    response.returnValue.refreshToken
                                );
                                localStorage.setItem(
                                    "username",
                                    this.form.username
                                );
                                localStorage.setItem(
                                    "rememberPassword",
                                    this.rememberPassword
                                );
                                if (this.rememberPassword === true) {
                                        localStorage.setItem(
                                        "password",
                                        this.form.password
                                    )
                                }else{
                                    localStorage.removeItem(
                                    "password",
                                    this.form.password
                                    )
                                }
                                this.getUserInfo();
                                // this.$dialog({
                                //     title: "提示",
                                //     confirm: "确定",
                                //     type: "success",
                                //     message: "您的账号正在重复登录，其他登录地点即将下线",
                                // })
                                //     .then((value) => {
                                //         if (value) {
                                //             //确定按钮
                                //             localStorage.setItem(
                                //                 "accesstoken",
                                //                 response.returnValue.accessToken
                                //             );
                                //             localStorage.setItem(
                                //                 "refreshToken",
                                //                 response.returnValue.refreshToken
                                //             );
                                //             localStorage.setItem(
                                //                 "username",
                                //                 this.form.username
                                //             );
                                //             localStorage.setItem(
                                //                 "rememberPassword",
                                //                 this.rememberPassword
                                //             );
                                //             if (this.rememberPassword === true) {
                                //                     localStorage.setItem(
                                //                     "password",
                                //                     this.form.password
                                //                 )
                                //             }else{
                                //                 localStorage.removeItem(
                                //                 "password",
                                //                 this.form.password
                                //                 )
                                //             }
                                //             this.getUserInfo();
                                //         }
                                //     })
                                //     .catch((err) => {
                                //         console.log(err);
                                //     });
                            } else {
                                localStorage.username = this.form.username;
                                localStorage.setItem(
                                    "accesstoken",
                                    response.returnValue.accessToken
                                );
                                localStorage.setItem(
                                    "refreshToken",
                                    response.returnValue.refreshToken
                                );
                                localStorage.setItem(
                                    "rememberPassword",
                                    this.rememberPassword
                                );
                                if (this.rememberPassword === true) {
                                    localStorage.setItem(
                                        "password",
                                        this.form.password
                                    );
                                }else{
                                    localStorage.removeItem(
                                        "password",
                                        this.form.password
                                    )
                                }
                                this.getUserInfo();
                            }
                        } else {
                            this.$message.error(response.message);
                        }
                    })
                    .catch((error) => {
                        this.loading = false;
                        this.$message.error("网络异常！");
                    });
            }
        },
        /**
         * 检查登录信息
         */
        checkLogin () {
            if (!this.form.username) {
                this.$message.error("请输入手机号");
                return false;
            }
            if (!this.isPhone(this.form.username)) {
                this.$message.error("手机号输入错误");
                return false;
            }
            if (!this.form.password) {
                this.$message.error("请输入密码");
                return false;
            }
            return true;
        },
        /**
         * 倒计时
         */
        countDown () {
            if (!this.isPhone(this.register.mobile)) {
                this.$message.error("手机号输入错误");
                return false;
            } else {
                if (this.smsText == "获取验证码") {
                    this.getCode((_) => {
                        let i = 60;
                        this.smsText = "60s";
                        let timer = setInterval(() => {
                            i--;
                            if (i < 0) {
                                clearInterval(timer);
                                this.smsText = "获取验证码";
                            } else {
                                this.smsText = i + "s";
                            }
                        }, 1000);
                    });
                }
            }
        },
        /**
         * 获取验证码
         */
        getCode (cb) {
            user
                .pushShortMessage({ mobile: this.register.mobile })
                .then((res) => {
                    if (res.code == "0") {
                        cb();
                    } else {
                        this.$message.warning(res.message);
                    }
                })
                .catch((err) => {
                    this.message.error("发送验证码失败！");
                });
        },
        /**
         * 注册或找回密码
         */
        registerFn () {
            if (!this.loading && this.checkRegister()) {
                this.loading = true;
                if (this.type == 2) {
                    let params = JSON.parse(JSON.stringify(this.register));
                    user
                        .register(params)
                        .then((res) => {
                            this.loading = false;
                            if (res.code == "0") {
                                this.form.username = params.mobile;
                                this.form.password = params.password;
                                this.login();
                            } else {
                                this.$message.error(res.message);
                            }
                        })
                        .catch((err) => {
                            this.loading = false;
                            this.$message.error("注册失败！");
                        });
                } else {
                    let params = JSON.parse(JSON.stringify(this.register));
                    params.msgCode = params.registerCode;
                    user
                        .forgetPassword(params)
                        .then((res) => {
                            this.loading = false;
                            if (res.code == "0") {
                                this.$message.success("密码修改成功！");
                                this.type = 0;
                                this.initForm();
                            } else {
                                this.$message.error(res.message);
                            }
                        })
                        .catch((err) => {
                            this.loading = false;
                            this.$message.error("注册失败！");
                        });
                }
            }
        },
        /**
         * 检查忘注册或记密码信息
         */
        checkRegister () {
            if (!this.register.mobile) {
                this.$message.error("请输入手机号");
                return false;
            }
            if (!this.isPhone(this.register.mobile)) {
                this.$message.error("手机号输入错误");
                return false;
            }
            if (!this.register.registerCode) {
                this.$message.error("请输入验证码");
                return false;
            }
            if (!this.register.password) {
                this.$message.error("请输入密码");
                return false;
            }
            return true;
        },
        /**
         * 检查手机号
         */
        isPhone (value) {
            let rex = new RegExp(/^1\d{10}$/g);
            if (rex.test(value)) {
                return true;
            } else {
                return false;
            }
        },
    },
    beforeDestroy () {
        //清除定时器
        clearInterval(this.timer);
        if (window.queryUser) {
            clearInterval(window.queryUser);
        }
    },
};
</script>
<style lang="scss" scoped>
.container {
    .tools{
        background: linear-gradient(#ccf0ff, #8fc8e0);
        width: 400px;
        height: 200px;
        position: absolute;
        top: calc(50vh - 150px);
        left:calc(50vw - 200px);
        z-index: 10000!important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        .resetKu{
            margin-top: 40px;
            width:160px;
            height:50px;
            border-radius:4px;
            border: none;
            color:#fff;
            font-size: 20px;
            background-color: #63b4d6;
            cursor: pointer;
        }
    } 
    .header {
        -webkit-app-region: drag;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 25px;
        width: 100%;
    }
    .video-bg {
        width: 100%;
        height: 100vh;
        object-fit: fill;
    }
    .login-bg {
        position: relative;
        li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            opacity: 0;
            transition: opacity 1.5s linear;
            &.fadeInout {
                opacity: 1;
            }
            img {
                width: 100%;
                height: 100vh;
                object-fit: cover;
            }
        }
    }
    .close-wrap {
        position: absolute;
        top: 20px;
        right: 0px;
        width: 172px;
        height: 36px;
        background-image: url("../../assets/img/login/close_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        img {
            width: 14px;
            height: 14px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
    .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 450px;
        height: 420px;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.3);
        margin: auto;
        padding: 0 25px;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1;
        .qrcode {
            position: absolute;
            top: -1px;
            right: -1px;
            width: 54px;
            height: 49px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .login-title {
            font-size: 20px;
            color: #fff;
            text-align: center;
            height: 48px;
            margin-top: 43px;
            margin-bottom: 30px;
            img {
                width: 205px;
                height: 48px;
            }
        }

        .group-wrap {
            margin-top: 24px;
            display: flex;
            align-items: center;
            width: 400px;
            height: 48px;
            border-radius: 24px;
            background-color: #fff;
            padding: 0 18px;
            box-sizing: border-box;

            .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
            }
            .login-input {
                border: none;
                flex: 1;
                font-size: 16px;
                color: #606266;
                height: 40px;
            }
        }
        .password-box{
            display: flex;
            margin-top: 9px;
            justify-content: space-between;
            /deep/.el-checkbox__inner{
                border-color: #fff;
                margin-left: 2px;
                border-radius: 50%;
            }
            /deep/.el-checkbox__inner::after{
                // display: none;
                position:absolute;
                top:0;
                
            }
            /deep/.el-checkbox__input.is-checked .el-checkbox__inner{
                  border-radius: 50%;
                  border:2px solid #fff;
                  background: opacify($color: #0085ff, $amount: 0);
            }
            /deep/.el-checkbox__input.is-checked+.el-checkbox__label{
                color: #fff;
                border-color: #fff;
            }
        }
        .text-left{
            text-align: left;
            transform: scale(1.0);
            // opacity: 0.7;
        }
        .text-right {
            text-align: right;
            a {
                font-size: 14px;
                color: #fff;
                // opacity: 0.7;
            }
        }

        .text-center {
            text-align: center;
            margin-top: 18px;
            a {
                font-size: 14px;
                color: #fff;
                opacity: 0.7;
            }
        }
        /deep/ .el-button {
            margin-top: 30px;
            width: 100%;
            height: 48px;
            border-radius: 24px;
            font-size: 16px;
            &.is-disabled {
                background-color: #a8b9c9;
                border: none;
            }
        }
    }
    .login-wrap {
    }
    .qrcode-wrap {
        text-align: center;
        .qrcode-box {
            border: 10px solid rgba(255, 255, 255, 0.14);
            width: 238px;
            height: 238px;
            margin: auto;
            img {
                width: 218px;
                height: 218px;
            }
        }
        .qrcode-tips {
            margin-top: 17px;
            color: #fff;
            opacity: 0.7;
        }
    }
    .register-wrap {
        .group-wrap {
            margin-top: 17px;
            &.sms {
                .sms-btn {
                    color: #0085ff;
                    font-size: 16px;
                    cursor: pointer;
                    margin-right: 6px;
                    &.sms-send {
                        color: #303133;
                    }
                }
            }
        }
        /deep/ .el-button {
            margin-top: 20px;
        }
    }
    .copyright {
        position: absolute;
        bottom: 36px;
        left: calc(50% - 100px);
        width: 200px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        opacity: 0.7;
    }
}
</style>
